<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MessageComputing</title>
    <link href="../css/layui.css" rel="stylesheet">
    <link href="../dist/gridstack.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/messageComputing.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/font-awesome/css/font-awesome.css">
</head>
<body>
<div class="head layui-row">
    <div class="layui-col-xs6">
        <a href="../index.html"><img src="../images/logo.png" id="logo"/></a>
    </div>
    <div class="layui-col-xs6" style="text-align: right">
        <div class="search-box">
            <input id="search" placeholder="Search"/>
            <i class="icon-search"></i>
            <i class="icon-add-paper"></i>
            <i class="icon-setting"></i>
            <label id="username">Ttmny</label>
        </div>
    </div>
</div>
<div class="main-container" id="box">
    <div class="main-box content-box">
        <div class="tip-box body-box">
            <div class="tip-title">
                <label>Newly Build</label>
                <input type="text" class="film-name" placeholder="Input Film Name">
                <span class="run" @click="runStep()"><i class="icon-run"></i><label>Next</label></span>
            </div>
            <div class="tip-body">
                <div class="asset">
                    <div class="asset-class">
                        <label>Asset Class</label>
                    </div>
                    <div class="aseet-selects">
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Money Markets</label>
                            </div>
                            <div class="select-option" style="display: none">
                                <label>Swaps<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                                <label>STIR Futures add Options</label>
                                <label>Forward Rate Agreements</label>
                                <label>Repos</label>
                                <label>Islamic Interbank Markets</label>
                                <label>Deposits</label>
                                <label>Bond Futures</label>
                                <label>Caps and Floors</label>
                                <label>Swaptions</label>
                                <label>Fixings</label>
                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Foreign Exchange</label>
                            </div>
                            <div class="select-option">

                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Fixed Income</label>
                            </div>
                            <div class="select-option" style="display: none">
                                <label>Interest Rate Derivatives<i class="fa fa-angle-right"
                                                                   aria-hidden="true"></i></label>
                                <label>Loans<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                                <label>Futures and Options<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                                <label>Credit default Swaps</label>
                                <label>Securitized Products<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                                <label>Fixed Income Indices</label>
                                <label>Bonds<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Funds</label>
                            </div>
                            <div class="select-option">

                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Real Estate</label>
                            </div>
                            <div class="select-option">

                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Advanced Search</label>
                            </div>
                            <div class="select-option">

                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Commodities</label>
                            </div>
                            <div class="select-option" style="display: none">
                                <label>Energy</label>
                                <label>Metals</label>
                                <label>Agriculture</label>
                                <label>Shipping</label>
                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>MacroEconomy</label>
                            </div>
                            <div class="select-option" style="display:none">

                            </div>
                        </div>
                        <div class="select">
                            <div class="main-select">
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                                <label>Equities</label>
                            </div>
                            <div class="select-option" style="display:none">
                                <!--<label>Indices<i class="fa fa-angle-right" aria-hidden="true"></i></label>-->
                                <!--<label>Index Futures</label>-->
                                <!--<label>Volatility Indices</label>-->
                                <!--<label>TR Indices<i class="fa fa-angle-right" aria-hidden="true"></i></label>-->
                                <label>Stocks<i class="fa fa-angle-right" aria-hidden="true"></i></label>
                                <!--<label>Convertibles</label>-->
                                <!--<label>Islamic<i class="fa fa-angle-right" aria-hidden="true"></i></label>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="asset-child" id="assetChild">
                    <label v-for="item in assetChild">{{item}}</label>
                </div>

                <div class="asset-child" id="Stocks">
                    <label>Asia</label>
                    <div style="margin-left:10px">
                        <label>SSE (Shanghai Stock Exchange)</label>
                        <label>Hang Seng Index</label>
                        <label>East Stock Exchange TOPIX</label>
                        <label>Han Gguo Ko SPI 200 Index</label>
                        <label>Ri Jing 300 Index</label>
                    </div>
                    <label>America</label>
                    <label>Australia</label>
                    <label>Europe</label>
                    <label>Africa</label>
                </div>

                <div class="factors">
                    <div class="factor-item">
                        <div class="asset-class factor-title">
                            <label>Setting  which target  value</label>
                        </div>
                        <div class="factor-content target">
                            <label id="target"></label>
                        </div>
                    </div>


                    <div class="factor-item" v-for="(item,index) in factorArray">
                        <div class="asset-class factor-title">
                            <label>Factor {{index+1}}:{{item.name}}</label>
                        </div>
                        <div class="factor-content">
                            <div class="layui-row">
                                <div class="layui-col-md6 factor-padding-right">
                                    <label class="select-title">Missing Value Processing</label>
                                    <div class="factor-select">
                                        <select class="select-item" style="width: 40%" onchange="selectChanged(this)" :id="'select'+(index+1)">
                                            <option value="0">Deleting method</option>
                                            <option value="1">Filling law</option>
                                        </select>
                                        <select class="select-item" style="width: 59%" :id="'select'+(index+1)+'-next'">
                                            <option value="0">Simple deleting method</option>
                                            <option value="1">Weighting method</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md6 factor-padding-left">
                                    <label class="select-title">Classification Model Balanced data Set</label>
                                    <div class="factor-select">
                                        <select class="select-item" style="width: 100%">
                                            <option value="">Undersampling & Oversampling</option>
                                            <option value="">Less sampling</option>
                                            <option value="">Oversampling</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md6 factor-padding-right">
                                    <label class="select-title">Standardization Method</label>
                                    <div class="factor-select">
                                        <select class="select-item" style="width: 100%">
                                            <option value="">Standardization of deviation</option>
                                            <option value="">Z-score</option>
                                            <option value="">abs</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md6 factor-padding-left">
                                    <label class="select-title">Time Sort</label>
                                    <div class="factor-select">
                                        <input type="text" class="input-time" style="width:43.7%" :id="'time'+(index+1)+'1'">
                                        <input type="text" class="input-time" style="width:43.7%" :id="'time'+(index+1)+'2'">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md12 factor-padding-right">
                                    <label class="select-title">MarketPsych</label>
                                    <div class="factor-select">
                                        <span><input type="checkbox" :name="'factor'+(index+1)+'All'" value="All" >All</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Buzz" >Buzz</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Optimism" >Optimism</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Stress" >Stress</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="LoveHate">LoveHate</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Violence">Violence</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Anger" >Anger</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Conflict">Conflict</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Fear" >Fear</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Joy" >Joy</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Trust" >Trust</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Surprise">Surprise</span>
                                        <span><input type="checkbox" :name="'factor'+(index+1)" value="Gloom" >Gloom</span>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md12 factor-padding-right">
                                    <label class="select-title">Sentiment</label>
                                    <div class="factor-select">
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)+'All'" value="All" >All</span>
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)" value="Positive" >Positive</span>
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)" value="General Positive" >General Positive</span>
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)" value="Neutral">Neutral</span>
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)" value="General Negative" >General Negative</span>
                                        <span><input type="checkbox" :name="'sentiment'+(index+1)" value="Negative" >Negative</span>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <!--<input type="button" class="delete-button" value="Delete">-->
                                    <input type="button" class="delete-button1" value="Delete" @click="deleteFactor(index)">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="factor-padding-right">
                        <input type="button" class="add-button" value="+ Add" @click="addFector()">
                    </div>

                    <div class="layui-row">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row" id="two-button">
            <div class="layui-col-md12 factor-padding-right">
                <span class="run" @click="runBack()"><i class="icon-runBack"></i><label>Back</label></span>
                <a href="../file/SSE-R.xlsx">
                    <span class="download"><i class="icon-download"></i><label>Download</label></span>
                </a>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-1.7.min.js" type="text/javascript"></script>
<!--<script src="../js/laydate/laydate.js"></script>-->
<script src="../js/layui/layui.js"></script>
<script src="../js/vue.min.js"></script>
<script>
    layui.use(['element', 'form', 'laydate','layer'], function () {
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        laydate.render({
            elem: '#time11',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '08 29,2013',
            showBottom: false
        });

        laydate.render({
            elem: '#time12',
            lang: 'en',
            position: 'fixed',
            format: 'MM dd,yyyy',
            value: '10 25,2018',
            showBottom: false
        });
        // var json = [{
        //     "name":"Swaps",
        //     "value":["Basis Swaps", "Cross-Currency Swaps", "Currency Basis Swaps", "Forward-Starting IRS",
        //         "Interest Rate Swaps", "Overnight Index Swaps"]
        //     },{
        //     "name":"Interest Rate Derivatives",
        //     "value":["Swaps","Swaptions","Caps and Floors","Forward Rate Agreements","Rops"]
        //     },{
        //     "name":"Loans",
        //     "value":["Islamic Financing/Loans"]
        //     },{
        //     "name":"Futures and Options",
        //     "value":["STIR Futures and Options"]
        //     },{
        //     "name":"Securitized Products",
        //     "value":["US Agency Pools and TBAs","MBS,CMOs and ABS"]
        //     },{
        //         "name":"Bonds",
        //         "value":["Government","US Municipals","Non-US Municipals","Agencies","Supra/State/Provincials","Covered","Corporate","Convertibles"]
        //     }
        // ];

        var mainVue = new Vue({
            el: '#box',
            data: {
                factorArray:[{"name":""}],
                assetChild:[],
                selectOption:"",
                json:{"Swaps":["Basis Swaps","Cross-Currency Swaps","Currency Basis Swaps","Forward-Starting IRS","Interest Rate Swaps","Overnight Index Swaps"],"Interest Rate Derivatives":["Swaps","Swaptions","Caps and Floors","Forward Rate Agreements","Rops"],"Loans":["Islamic Financing/Loans"],"Futures and Options":["STIR Futures and Options"],"Securitized Products":["US Agency Pools and TBAs","MBS,CMOs and ABS"],"Bonds":["Government","US Municipals","Non-US Municipals","Agencies","Supra/State/Provincials","Covered","Corporate","Convertibles"]}
            },
            mounted: function () {

            },
            methods: {
                runStep: function () {
                    window.location.href = "modelCalculation.html";
                },
                runBack: function () {
                    window.location.href = "../index.html";
                },
                addFector: function() {
                    var item = {"name":""}
                    this.factorArray.push(item);
                },
                deleteFactor: function(index){
                    this.factorArray.splice(index,1);
                }
            },updated: function () {

                var num = $(".factor-item").length;

                for(var i=1;i<=num;i++){
                    laydate.render({
                        elem: '#time'+i+'1',
                        lang: 'en',
                        position: 'fixed',
                        format: 'MM dd,yyyy',
                        value: '08 29,2013',
                        showBottom: false
                    });

                    laydate.render({
                        elem: '#time'+i+'2',
                        lang: 'en',
                        position: 'fixed',
                        format: 'MM dd,yyyy',
                        value: '10 25,2018',
                        showBottom: false
                    });
                }

            }
        });

        $(function () {
            $(".main-select").click(function () {
                var index = $(".aseet-selects .select .main-select").index(this);
                console.log(index);
                if ($(".main-select:eq(" + index + ") i").attr("class") == "fa fa-angle-down") {
                    $(".main-select:eq(" + index + ") i").removeClass("fa fa-angle-down");
                    $(".main-select:eq(" + index + ") i").addClass("fa fa-angle-right");
                    $(".select-option:eq(" + index + ")").hide();
                } else {
                    $(".main-select:eq(" + index + ") i").removeClass("fa fa-angle-right");
                    $(".main-select:eq(" + index + ") i").addClass("fa fa-angle-down");
                    $(".select-option:eq(" + index + ")").show();
                }
            });

            $(".select-option label").click(function () {
                var top = $(this).offset().top - 100;
                $(".select-option label").removeClass("option-checked");
                $(this).addClass("option-checked");
                if ($(this).find("i").length > 0) {

                    $(".asset-child").css("display", "none");
                    if($(this).text() == "Stocks"){
                        $("#Stocks").css("top", top + "px");
                        $("#Stocks").css("display", "inherit");
                    }else{
                        var name = $(this).text();
                        mainVue.assetChild = mainVue.json[name];
                        $("#assetChild").css("top", top + "px");
                        $("#assetChild").css("display", "inherit");
                    }

                    mainVue.selectOption = $(this).text();
                } else {
                    $(".asset-child").css("display", "none");

                    var index = $(".factor-item").index($(".factor-item-check"));
                    if(index == 0){
                        layer.msg('Select Value Of Equities->Stocks->Asia-> ');
                    }else{
                        if($("#target").html() == ""){
                            layer.msg('Input Setting which target value');
                        }else{
                            var item = {"name":$(this).text()}
                            mainVue.factorArray.splice(index-1,1,item);
                        }
                    }
                }
            });

            $("body").on("click",".asset-child label",function(){
                debugger;
                $(".asset-child label").removeClass("option-checked");
                $(this).addClass("option-checked");
                var index = $(".factor-item").index($(".factor-item-check"));
                if(index == 0){
                    if(mainVue.selectOption == "Stocks"){
                        if($(this).text().length > 9){
                            var nameArray = $(this).text().split(" ");
                            localStorage.setItem("name",nameArray[0]);

                            $("#target").text("Equities<<Stocks<<Asia<<"+$(this).text());
                        }else{
                            $(".asset-child").css("display", "none");
                            layer.msg('Select Value Of Equities->Stocks->Asia-> ');
                        }
                    }else{
                        $(".asset-child").css("display", "none");
                        layer.msg('Select Value Of Equities->Stocks->Asia-> ');
                    }
                }else{
                    if($("#target").html() == ""){
                        $(".asset-child").css("display", "none");
                        layer.msg('Input Setting which target value');
                    }else{
                        var item = {"name":$(this).text()}
                        mainVue.factorArray.splice(index-1,1,item);
                    }
                }

                $(".asset-child").css("display", "none");
            });

            $("body").on("click","input:checkbox",function(){
                if($(this).val() == "All"){
                    var name = $(this).attr("name").substr(0,$(this).attr("name").length-3);
                    console.log(name);
                    if($(this).attr("checked") == "checked"){
                        $("input[name="+name+"]").attr("checked","checked");
                    }else{
                        $("input[name="+name+"]").removeAttr("checked");
                    }
                }
            });

            $("body").on("click",".factor-item",function(){
                $(".factor-item").removeClass("factor-item-check");
                $(this).addClass("factor-item-check");
            })
        });
    });

    function selectChanged(item) {//二级联动
        var $next = $("#" + $(item).attr("id") + "-next");
        if ($(item).val() == 0) {
            $next.html("");
            $next.append("<option value='Simple deleting method'>Simple deleting method</option>");
            $next.append("<option value='Weighting method'> Weighting method </option>");
        } else if ($(item).val() == 1) {
            $next.html("");
            $next.append('<option value="Treating Missing Attribute ...">Treating Missing Attribute ...</option>');
            $next.append('<option selected="" value="Mean/Mode Completer">Mean/Mode Completer</option>');
            $next.append('<option value="Hot deck imputation">Hot deck imputation</option>');
            $next.append('<option value="Clustering imputation">Clustering imputation</option>');
            $next.append('<option value="Assigning All Possible...">Assigning All Possible...</option>');
            $next.append('<option value="Combinatorial Completer">Combinatorial Completer</option>');
            $next.append('<option value="Regression">Regression</option>');
            $next.append('<option value="MAX Likelihood,Ml">MAX Likelihood,Ml</option>');
            $next.append('<option value="MCMC">MCMC</option>');
        }
    }
</script>
</body>
</html>